<template>
  <div class="app-container">
    <el-row gutter="20">
      <el-form v-if="show" ref="params" v-permission="['monitor:user:list']" :model="params" :inline="true" class="search-form">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="params.userName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetForm('params')">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row class="btn-group" type="flex" justify="space-between">
        <el-col span="20">
          <el-button
            v-permission="['monitor:user:deleteIds']"
            type="danger"
            icon="el-icon-delete"
            :disabled="multipleSelection.length===0"
            @click="remove"
          >强退</el-button>
        </el-col>
        <el-col span="4" align="right">
          <el-tooltip class="item" effect="dark" :content="show?'隐藏搜索':'显示搜索'" placement="top">
            <el-button icon="el-icon-search" circle @click="show = !show" />
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" circle @click="findPage" />
          </el-tooltip>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          label="序号"
          type="index"
          align="center"
        />
        <el-table-column
          prop="token"
          label="token"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="userName"
          label="用户名称"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        />
        <el-table-column label="操作" width="200px" align="center">
          <template slot-scope="{row}">
            <div>
              <el-button v-permission="['monitor:user:delete']" type="text" icon="el-icon-delete" @click="remove(row.token)">强退</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
import { list, remove, removeIds } from '@/api/monitor/user'
export default {
  name: 'MonitorUser',
  components: { },
  data() {
    return {
      id: null,
      data: [],
      tableData: [],
      params: { userName: '' },
      multipleSelection: [],
      show: true
    }
  },
  created() {
    this.list()
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    async list() {
      const { data } = await list()
      this.data = data
      this.tableData = data
    },
    remove(id) {
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (typeof id === 'string') {
          await remove(id)
          await this.list()
        } else {
          const ids = []
          this.multipleSelection.map(val => {
            ids.push(val.token)
          })
          await removeIds(ids)
          await this.list()
        }
      })
    },
    search() {
      this.tableData = this.data.filter(data => !this.params.userName || data.userName.includes(this.params.userName))
    }
  }
}
</script>

<style scoped>

</style>
